<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- v-for(列表渲染) -->
        <!-- 数组
            1. v-for="数组中的元素 in data中的数组"
            2. v-for="(数组中的元素,下标) in data中的数组"
        -->
        <ul>
            <li v-for="value in array">
                {{value}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(value,i) in array">{{value}}--{{i}}</li>
        </ul>
        <hr>
        <!-- 对象
        1. v-for="对象中key所对应的value值 in data中的对象per" 
        2. v-for="(value,key) in data中的对象per"
        3. v-for="(value,key,i) in data中的对象per"
            i指的是key-value键值对的索引值 从0开始 -->
        <ul>
            <li v-for="item in per">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(value,key) in per">{{value}}--{{key}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(value,key,i) in per">{{value}}--{{key}}--{{i}}</li>
        </ul>


    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                per: {
                    name: '小刘',
                    age: 18,
                    gender: '未知'
                },
                array: ['欧美', '日韩', '亚洲']
            },
            methods: {

            }
        });
    </script>
</body>

</html>